<template>
    <div class="addArticle_box ">
        <h3 class="box-card">
            <el-icon style="margin-right: 10px;">
                <EditPen />
            </el-icon>
            新建文章
        </h3>
        <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="17" :xl="17">
                <div class="write_abstract box-card">
                    <h4 class="text-color">标题</h4>
                    <el-input v-model="write.titleValue" placeholder="请输入文章标题" maxlength="50" show-word-limit size="large"
                        clearable />
                    <p class="text-color">标示文章、作品内容的简明语句，填写醒目的</p>
                </div>
                <div class="write_abstract box-card">
                    <!-- 富文本编辑器 -->
                    <Toolbar :editor="editorRef" :defaultConfig="toolbarConfig" />
                    <Editor style="height: 420px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig"
                        @onCreated="handleCreated" class="article" />
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="7" :xl="7">
                <div class="write_abstract box-card">
                    <h4 class="text-color">摘要</h4>
                    <el-input v-model="write.abstractValue" :autosize="{ minRows: 3, maxRows: 5 }" maxlength="200"
                        show-word-limit type="textarea" placeholder="请简单概述文章内容" clearable />
                    <p class="text-color">筛选文章主要内容，让读者初步了解文章</p>
                </div>
                <div class="write_abstract box-card">
                    <h4 class="text-color">缩略图(不上传则随机一张)</h4>
                    <el-input size="large" v-model="write.thumbnailValue" placeholder="请点击上传图片或手动输入图片地址">
                        <template #append>
                            <el-upload ref="uploadEle" class="upload-demo" :action="uploadURL"
                                :on-success="handleAvatarSuccess" :before-upload="beforeUploadFunction"
                                :show-file-list="false">
                                <template #trigger>
                                    <el-button>上传图片</el-button>
                                </template>
                            </el-upload>
                        </template>
                    </el-input>
                    <p class="text-color">注：点击上传的图片地址由系统生成，修改会导致图片失效</p>
                </div>
                <div class="write_abstract box-card">
                    <h4 class="text-color">分类</h4>
                    <el-select v-model="write.classifyValue" placeholder="请选择文章分类" size="large">
                        <el-option v-for="item in classifyInfo" :label="item.classifyName" :value="item.classifyId" />
                    </el-select>
                    <p class="text-color">选择分类可让读者更便捷的查找文章</p>
                </div>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <div class="write_abstract box-card">
                            <h4 class="text-color">状态</h4>
                            <el-select v-model="write.stateValue" placeholder="文章状态" size="large">
                                <el-option label="公开" value="1" />
                                <el-option label="私密" value="2" />
                            </el-select>
                            <p class="text-color">私密可视为草稿</p>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="write_abstract box-card">
                            <h4 class="text-color">评论</h4>
                            <el-select v-model="write.commentValue" placeholder="评论是否开启" size="large">
                                <el-option label="开启" value="1" />
                                <el-option label="关闭" value="2" />
                            </el-select>
                            <p class="text-color">开启评论，开启新世界</p>
                        </div>
                    </el-col>
                </el-row>
                <div class="write_abstract" style="text-align: center;background: none;">
                    <el-button text @click="previewArticleDialogFormVisible = true">预览</el-button>
                    <el-button style="width: 50%;" plain color="#2fa7b9" @click="submitAdd">提交</el-button>
                    <p class="text-color">注：普通用户提交文章需要等待管理员审核</p>
                </div>
            </el-col>
        </el-row>
    </div>
    <!-- 预览文章 -->
    <PreviewArticle :previewArticleDialogFormVisible="state.previewArticleDialogFormVisible" :valueHtml="valueHtml"
        @onPreviewArticleCloseDialog="previewArticleCloseDialog"></PreviewArticle>
</template>
<script lang="ts" setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { State, ClassifyInfo } from '@/types/addArticleTypes'
// 预览文章弹窗
import PreviewArticle from './previewArticle/index.vue'

import {
    Editor,
    Toolbar
} from '@wangeditor/editor-for-vue'

import {
    ref,
    toRefs,
    onMounted,
    reactive,
    shallowRef,
    onBeforeUnmount,
    watch
} from 'vue'

import {
    ElMessage,
    ElNotification,
} from 'element-plus'
import { GetArticleClass } from '@/api/foreground/index'
import service from '@/utils/everyRequest';
import { InsertVisitInfo, UpdateArticleNumberByClassifyId } from '@/api/backstage/index'
import { useStore } from '@/store/index'
import { storeToRefs } from 'pinia'
const Store = useStore()
const { LoginInfo } = storeToRefs(Store)
const { code: LoginCode, data: LoginData } = LoginInfo.value;
function loadData(state: State) {
    // 查询文章分类
    GetArticleClass().then(res => {
        state.classifyInfo = res.data
    })
}

// 以下是富文本框的相关配置

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref('')

const toolbarConfig = {}
const editorConfig = {
    placeholder: '在小李，开始您的Write吧~',
    MENU_CONF: {
        uploadImage: {},
        uploadVideo: {},
        codeSelectLang: {},
    }
}
// watch(valueHtml.value, function (value, oldvalue) {
//     Prism.highlightAll();
// })

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})



const handleCreated = (editor: any) => {
    editorRef.value = editor // 记录 editor 实例，重要！'
}

editorConfig.MENU_CONF['uploadImage'] = {
    // 上传图片的配置
    server: import.meta.env.VITE_HTTP + "upload/articleImgUpload",
    // 单个文件的最大体积限制，默认为 2M
    maxFileSize: 5 * 1024 * 1024, // 5M
    // 单个文件上传失败
    onFailed(file: any, res: any) {
        ElMessage.error(`${file.name} 上传失败`)
    },
    customInsert(res: any, insertFn: any) {                  // JS 语法
        // res 即服务端的返回结果
        // 从 res 中找到 url alt href ，然后插入图片
        insertFn(import.meta.env.VITE_HTTP + res.data.url)
    },
}

editorConfig.MENU_CONF['uploadVideo'] = {
    // 上传视频的配置
    server: import.meta.env.VITE_HTTP + 'upload/articleVideoUpload',
    // 单个文件的最大体积限制，默认为 20M
    maxFileSize: 100 * 1024 * 1024, // 100M
    // 单个文件上传失败
    onFailed(file: any, res: any) { // JS 语法
        ElMessage.error(`${file.name} 上传失败`)
        console.log(`${file.name} 上传失败`, res)
    },
}
editorConfig.MENU_CONF['codeSelectLang'] = {
    // 代码语言
    codeLangs: [{
        text: 'CSS',
        value: 'css'
    },
    {
        text: 'HTML',
        value: 'html'
    },
    {
        text: 'XML',
        value: 'xml'
    },
    {
        text: 'Javascript',
        value: 'javascript'
    },
    {
        text: 'Typescript',
        value: 'typescript'
    },
    {
        text: 'JSX',
        value: 'jsx'
    },
    {
        text: 'Go',
        value: 'go'
    },
    {
        text: 'PHP',
        value: 'php'
    },
    {
        text: 'C',
        value: 'c'
    },
    {
        text: 'Python',
        value: 'python'
    },
    {
        text: 'Java',
        value: 'java'
    },
    {
        text: 'C++',
        value: 'cpp'
    },
    {
        text: 'C#',
        value: 'csharp'
    },
    {
        text: 'Visual Basic',
        value: 'visual-basic'
    },
    {
        text: 'SQL',
        value: 'sql'
    },
    {
        text: 'Ruby',
        value: 'ruby'
    },
    {
        text: 'Swift',
        value: 'swift'
    },
    {
        text: 'Bash',
        value: 'bash'
    },
    {
        text: 'Markdown',
        value: 'markdown'
    }
    ]
}

// 以上是富文本框的相关配置

const state = reactive<State>({
    // 当前登录的用户信息
    userInfo: {
        userEmail: '',
        userIcon: '',
        userPass: '',
        userRegdate: '',
        userSignature: '',
        userId: -1,
        userType: -1,
        userName: ''
    },
    // 编写信息
    write: {
        titleValue: "",
        abstractValue: "",
        thumbnailValue: "",
        classifyValue: "",
        stateValue: "1",
        commentValue: "1"
    },
    // 分类信息
    classifyInfo: [],
    // 缩略图上传到服务器的路径
    uploadURL: import.meta.env.VITE_HTTP + "upload/thumbnailUpload",
    // 预览对话框状态
    previewArticleDialogFormVisible: false,
    randImg: ''
})

const { userInfo, write, classifyInfo, uploadURL, previewArticleDialogFormVisible } = toRefs(state)

//挂载后加载数据
onMounted(() => {
    const userInfo = LoginData.data[0];
    state.userInfo = userInfo
    loadData(state);
    getRandImg()
});

/**
* 模块名:
* 代码描述: 调用第三方接口获取随机图片
* 作者:lizibin
* 创建时间:2023/06/11 20:58:11
*/
const getRandImg = () => {
    service({
        url: 'https://api.vvhan.com/api/bing?type=json&rand=sj',
        method: 'GET',
    }).then((res) => {
        if(res.success) {
            state.randImg = res.data.url
        }
    }).catch(() => {
        state.randImg = ''
    })
}


// 图片上传格式、大小要求
const beforeUploadFunction = (rawFile: any) => {
    if (rawFile.type !== 'image/jpeg' &&
        rawFile.type !== 'image/jpg' &&
        rawFile.type !== 'image/png' &&
        rawFile.type !== 'image/gif') {
        ElMessage.error('仅支持图片格式.png | .jpg | .jpeg | .gif ')
        return false
    } else if (rawFile.size / 1024 / 1024 > 5) {
        ElMessage.error('仅支持大小不超过5MB的图片!')
        return false
    }
    return true
}

// 图片上传成功后执行的函数
const handleAvatarSuccess = (response: any) => {
    state.write.thumbnailValue = response.data;
}

// 关闭预览窗口
const previewArticleCloseDialog = (visible: any) => {
    state.previewArticleDialogFormVisible = visible;
}

// 提交
const submitAdd = () => {
    // 获取当前下拉框选中的value 对于的label值
    let obj = {} as ClassifyInfo;
    obj = state.classifyInfo.find((item) => {
        return item.classifyId === Number(state.write.classifyValue);
    });
    // 判断内容是否填写完整
    if (state.write.titleValue != "" && state.write.abstractValue != "" &&
        state.write.classifyValue != "" && state.write.stateValue != "" && state.write.commentValue !=
        "") {
        // 添加文章
        const params = {
            userId: state.userInfo.userId, // 编写用户编号
            userName: state.userInfo.userName, // 编写用户名称
            articleTitle: state.write.titleValue, // 文章标题
            articleClassifyId: state.write.classifyValue, // 分类编号
            articleClassifyName: obj.classifyName, // 分类名称
            articleDase: state.write.abstractValue, // 文章描述
            articleImgLitimg: state.write.thumbnailValue || state.randImg, // 文章缩略图
            articleContent: valueHtml.value, // 文章内容
            articleState: parseInt(state.write.stateValue), // 文章状态
            articlePass: state.userInfo.userType == 0 ? 2 :
                1, // 审核(1待审核，2审核通过，3审核失败) 判断当前用户时普通用户(1)还是管理员(1)
            commentState: parseInt(state.write.commentValue) // 文章评论状态
        }

        InsertVisitInfo(params).then((res) => {
            if (res.code == 0) {
                // 增加分类对应的文章数量  +1
                const params = {
                    classifyId: state.write.classifyValue
                }
                UpdateArticleNumberByClassifyId(params).then((res) => {
                    // 清空编写的文章内容
                    valueHtml.value = '<p></p>';
                    state.write = {
                        titleValue: "",
                        abstractValue: "",
                        thumbnailValue: "",
                        classifyValue: "",
                        stateValue: "1",
                        commentValue: "1"
                    };
                    ElNotification({
                        title: '提示',
                        message: state.userInfo.userType == 0 ? "文章发布成功！" :
                            "文章提交成功，等待管理员审核",
                        type: 'success',
                    })
                })
            }
        })
    } else {
        ElMessage.error('除缩略图之外的内容都是必填项哦~')
    }

}

</script>

<style scoped>
.addArticle_box {
    width: 100%;
    height: auto;
}

.addArticle_box>h3 {
    color: #2fa7b9;
    margin-bottom: 10px;
    padding: 20px 20px;
    background-color: white;
}

.write_abstract {
    background: white;
    text-align: left;
    padding: 10px 20px;
    margin-bottom: 10px;
}

.write_abstract h4 {
    line-height: 45px;
    color: #8f8f8f;
}

.write_abstract p {
    line-height: 35px;
    color: #8f8f8f;
    font-size: 12px;
}

.el-select {
    width: 100%;
}

:deep(.el-input-group__append) {
    width: 70px;
}

/* 富文本编辑器样式 */
:deep(.w-e-bar) {
    background-color: #fff;
    color: #8b8b8b;
    font-size: 15px;
    padding: 15px 5px;
    border-bottom: 1px solid #ececec;
}

:deep(.w-e-bar-divider) {
    background-color: white;
}

:deep(.w-e-bar svg) {
    fill: #8b8b8b;
}

:deep(.w-e-bar-item button) {
    color: #8b8b8b;
}

:global(.w-e-full-screen-container) {
    z-index: 999 !important;
}

:deep(.w-e-bar-item .active) {
    background-color: #e8e8e8;
}
</style>